<!doctype html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
		<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>2119班</title>
		<link rel="stylesheet" href="css/style-starter.css">
		<style type="text/css">
			#game{
				height: 246px;
			}
			#shop{
				height: 246px;
			}
			#chenxu{
				height: 246px;
			}
			.swiper {
			    width: 100%!import;
			    height: 300px;
			}
			.a{
				color: white;
			}
			.w3l-footer-29-main footer-29 text-center container main-social-footer-29 google-plus yun img{
				text-align: center;
				line-height: 42px;
			}
			
			
			* {
			    margin: 0;
			    padding: 0;
			}
			
			.li li {
			    list-style: none;
			}
			
			.li ul {
			    width: 360px;
			    height: 40px;
			  /*  background-color: #eee; */
			   margin-left: auto !important;



			}
			
			.li ul li {
			    position: relative;
			    float: left;
			    width: 120px;
			    height: 40px;
			    transform-style: preserve-3d;
			    /* 这个旋转只是为了便于观察效果 */
			    /* transform: rotateX(-30deg) rotateY(30deg); */
			    transition: all .5s;
			}
			
			 .li ul li:hover {
			    transform: rotateX(-90deg);
			}
			
			.li ul li a {
			    position: absolute;
			    display: block;
			    width: 100%;
			    height: 100%;
			    text-align: center;
			    line-height: 40px;
			    text-decoration: none;
			    color: #fff;
			}
			
			.li ul li a:nth-child(1) {
			   /* background-color: orange; */
			    transform: rotateX(90deg) translateZ(20px);
			}
			
			.li ul li a:nth-child(2) {
			   /* background-color: #8ca17e; */
			    transform: translateZ(20px);
			    /* opacity: .2; */
			}
			
		</style>
		
	</head>
	<body>
		<section class="w3l-bootstrap-header">
			<nav class="navbar navbar-expand-lg navbar-light py-lg-3 py-2">
				<div class="container">
					<a class="navbar-brand" href="index.html">2119班级网站</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse"
						data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
						aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon fa fa-bars"></span>
					</button>
					<div class="collapse navbar-collapse li" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto">
							<!-- <li class="nav-item"> <a class="nav-link" href="index.html">主页</a> </li>
							<li class="nav-item"> <a class="nav-link" href="xiangce.html">相册</a> </li>
							<li class="nav-item"> <a class="nav-link" href="denglu.html">班级通讯录</a> </li>
							<li class="nav-item"> <a class="nav-link" href="xin.html">班级新闻</a> </li> -->
							<li><a href="#">index</a><a href="index.html">首页</a></li>
							<li><a href="#">login</a><a href="xiangce.html">相册</a></li>
							<li><a href="#">address</a><a href="denglu.html">班级通讯录</a></li>
							<li><a href="#">register</a><a href="xin.html">新闻</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</section>
		<!--  Main banner section -->
		<section class="w3l-main-banner" id="home">
			<div class="companies20-content">
				<div class="companies-wrapper">
					<div class="item">
						<div class="slider-info banner-view text-center">
							<div class="banner-info container">
								<h3 class="banner-text mt-5"><a href="sheying.html" class="a">Welcome back to Class 2119</a></h3>
								<p class="my-4 mb-5 mt-5"><a href="denglu.html" class="a">回来看看吧</a></p>
								<br>
							</div>
						</div>

					</div>
				</div>
			</div>
		</section>
		<!--  //Main banner section -->
		<section class="w3l-about "> </section>
		<section class="w3l-feature-3" id="features">
			<div class="grid top-bottom">
				<div class="container">
					<div class="heading text-center mx-auto">
						<h3 class="head text-white">我们的爱好</h3>
					</div>
					<div class="swiper text-center mt-5">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<a href="https://www.runoob.com/" target="_blank">
									<div class="three-grids-columns" id="chenxu">
									<span class="fa fa-bug"></span>
									<h4>程序设计</h4>
									<p>为什么我的眼里常含泪水，因为我对这编程爱的深沉</p>
									</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="https://www.pinduoduo.com/" target="_blank">
								<div class="three-grids-columns" id="shop">
									<span class="fa fa-cart-arrow-down"></span>
									<h4>消费</h4>
									<p>“周光族”就是我们</p>
								</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="game/index.html" target="_blank">
								<div class="three-grids-columns" id="game">
									<span class="fa fa-gamepad"></span>
									<h4>游戏</h4>
									<p>重要的不是打什么游戏,重要的是和谁打</p>
								</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<div class="products-4" id="portfolio">
			<!-- Products4 block -->
			<!-- Products4 block -->
		</div>
		<script src="js/jquery-3.3.1.min.js"></script>
		<section class="services-12" id="experience"> </section>
		<section class="w3l-testimonials" id="testimonials">
			<!--//customers -->
		</section>
		<!-- grids block 5 -->
		<section class="w3l-footer-29-main" id="footer">
			<div class="footer-29 text-center">
				<div class="container">

					<div class="main-social-footer-29">

						<a href="https://gitee.com/yinjiancf/nodie.git" class="facebook" target="_blank"><span class="fa fa-gamepad"></span></a>
						<a href="https://www.pinduoduo.com/" class="twitter" target="_blank"><span class="fa fa-cart-arrow-down"></span></a>
						<a href="https://www.runoob.com/" class="instagram" target="_blank"><span class="fa fa-code"></span></a>
						<a href="https://gitee.com/" class="google-plus" target="_blank"><span class="fa fa-cloud"></span></a>
						<a href="https://www.bilibili.com/" class="linkedin" target="_blank"><span class="fa fa-video-camera"></span></a>
					</div>
					<div class="bottom-copies text-center">
						<p class="copy-footer-29"><a href="https://www.4399.com/" target="_blank">© </a><a href="index.html" class="a">2119 班班级网站</a></p>
						<p class="copy-footer-29">作者：陈浩田、李中琦、李朗</p>
						<p class="copy-footer-29">指导老师：吴伟伟</p>
					</div>
				</div>
			</div>
			<!-- move top -->
			<button onclick="topFunction()" id="movetop" title="Go to top">
				<span class="fa fa-angle-up"></span>
			</button>
			<script src="js/jquery-3.3.1.min.js"></script>
			<script>
				// When the user scrolls down 20px from the top of the document, show the button
				window.onscroll = function() {
					scrollFunction()
				};

				function scrollFunction() {
					if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
						document.getElementById("movetop").style.display = "block";
					} else {
						document.getElementById("movetop").style.display = "none";
					}
				}

				// When the user clicks on the button, scroll to the top of the document
				function topFunction() {
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}
			</script>
			<!-- /move top -->
		</section>
		<!-- // grids block 5 -->
		
		<!-- //footer-28 block -->
		</section>

		<script>
			$(function() {
				$('.navbar-toggler').click(function() {
					$('body').toggleClass('noscroll');
				})
			});
		</script>
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
			integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
		</script>

		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
			integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
		</script>

		<!-- Smooth scrolling -->
		<script>        
		  var mySwiper = new Swiper ('.swiper', {
		    direction: 'horizontal', 
			autoplay: {
			    delay: 3000,
			    stopOnLastSlide: false,
			    disableOnInteraction: true,
			    },
		    // loop: true, // 循环模式选项
		    
		    // 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		    },
		    
		    // 如果需要前进后退按钮
		    navigation: {
		      nextEl: '.swiper-button-next',
		      prevEl: '.swiper-button-prev',
		    },
		    
		    // 如果需要滚动条
		    scrollbar: {
		      el: '.swiper-scrollbar',
		    },
			effect:"cube",
		  })        
		  </script>


	</body>

</html>
<!-- // grids block 5 -->
